<%--
  Created by IntelliJ IDEA.
  User: 91658
  Date: 2018/6/8
  Time: 10:20
  账户管理
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>账户管理</title>
    <%@ include file="../common/common.jsp" %>
    <script type="text/javascript" src="/js/jquery.slidereveal.min.js"></script>
    <style>
        .one{
            width: 30%;
            height:145px;
            border:1px solid;
            float: left;
            border-radius:5px;
            margin: 20px;
        }
        .money{
            font-size: 50px;
            margin-top: 25px;
        }
        .msg-tip{
            position: absolute;
            top: 13%;
            left: 50%;
            font-size: 17px;
            color: #46A734;
            display: none;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%@ include file="../common/head.jsp" %>
        <%@ include file="../common/left.jsp" %>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="layui-collapse">
                    <c:forEach items="${accountList}" var="account">
                        <div class="layui-card one" style="background: ${account.color}">
                            <div class="layui-card-header">${account.accountName}</div>
                            <div class="layui-card-body money">
                                ¥${account.accountBalance}
                            </div>
                        </div>
                    </c:forEach>
                    <div class="layui-card one" style="background: #F2EFE6">
                        <div class="layui-card-header">新增</div>
                        <div class="layui-card-body money">
                            <button class="layui-btn layui-btn-fluid" style="height: 45%; margin-top: -20px;" id="addAccountBtn">新增</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%@ include file="../common/bottom.jsp" %>
    </div>
    <iframe id="slider" class="sliderslider" frameborder=0 height=100 marginheight=0 marginwidth=0
            style="z-index: 999;overflow-y :auto;overflow-x: hidden;	border-left: 5px solid #EEEEEE;"
            src="/account/add_account_frame"></iframe>
    <div class="msg-tip">
        <label>新增成功</label>
    </div>
</body>
<script type="text/javascript">
    layui.use(['element'], function(){
        var element = layui.element;

        $("#slider").slideReveal({
            trigger: $("#addAccountBtn"),
            push: true,
            width: "500",
            position: "right",
            autoEscape: true
        });

        $("#addAccountBtn").on('click',function () {
            var slider = $("#slider");
            var value = slider.css("right");
            if(value !== '0px'){
                slider.attr("src","/account/add_account_frame");
                slider.slideReveal("show");
            }else{
                slider.slideReveal("hide");
            }
        });
    });
    function closePopPage() {
        $("#slider").slideReveal("hide");
    }
    function showSuccessMsg() {
        $(".msg-tip").fadeIn("slow");
        $(".msg-tip").fadeOut(3000);
    }
</script>
</html>
